<template>
  <div class="layout">
    <TreePond class="tree" @treeselectvalue="treeselectvalue"></TreePond>
    <div class="cameraContent">
      <div class="cameraview-box">
        <div id="video_container" class="cameraview-box-one">
          <div v-if="startUp === 'true' && cricleAdd" class="cricle">
            <countDown :start-time="startTime" :step="-1" />
            <p>预热加载中,请耐心等待</p>
          </div>
          <!-- <iframe
              v-if="showFace === 'play'"
              :src="nowcameraurl"
              style="width: 100%; height: 100%"
            ></iframe> -->
          <div v-if="showFace === 'play'" id="video-container" style="width: 100%; height: 100%"></div>

          <div v-if="showFace === 'notCameraList'" style="
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              ">
            <h1>暂无摄像头</h1>
          </div>
          <div v-if="showFace === 'downFlow'" style="
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              ">
            <h1>萤石云流量不足，功能受限</h1>
          </div>
          <div v-if="showFace === 'transCamera'" style="
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              "></div>
          <div v-if="showFace === 'notCameraData'" style="
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              ">
            <h1>未取得该摄像头数据</h1>
          </div>
          <div v-if="showFace === 'timeout'" style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            ">
            <h1>静置超时，请刷新重新启动</h1>
          </div>
          <!-- <div
              id="full_screen"
              class="allScream"
              @click="showscreenT"
            >
              <svg-icon :icon-class=" showscreen ? 'enter-full-screen' : 'exit-full-screen'" />
            </div> -->
        </div>
        <zhcameralist ref="cameralist"  :isShowBtn="false" :cameralistparam="paramslist" @nowcameraurl="getcamerurl" @getUploadTime="handleLoading" />
        <!-- @cameraInfo="setCameraInfo" -->
        <div class="cameraview-bottom" style="display: flex; height: 50%; width: 100%">
          <div style="width: 100%; height: 90%">
            <div class="cameraview-box-two-line">
              <div class="cameraview-box-two-line-title">设备控制</div>
            </div>
            <div v-if="controshebeilist.length > 0" class="cameraview-box-two">
              <!-- {{ controshebeilist }} -->
              <div v-for="item in controshebeilist" :key="item.dataItemId" class="zh-contro">
                <div class="contro-one">
                  <div class="contro-one-title">{{ item.dataItemName }}</div>
                  <div class="contro-one-stau" :style="{ color: getequipmentStyle(item.nowstau) }">{{ item.nowstau }}
                  </div>
                </div>
                <div v-if="item.enumListTypetwo && item.enumListTypetwo.length > 0" class="contro-two">
                  <div v-for="(
                        kaiguanitem, kaiguanindex
                      ) in item.enumListTypetwo" :key="kaiguanindex" class="contro-two-zcon" @click="
      controlequpmentone(
        item.dataItemId,
        kaiguanitem.value,
        index
      )
      ">
                    {{ kaiguanitem.name }}
                  </div>
                </div>
                <div v-else class="contro-two">
                  <!-- <el-input
                      v-model="item.enumListValue"
                      type="number"
                      style="width:50%; border-radius: 10rpx;"
                    /> -->
                  <el-input-number v-model="item.enumListValue" controls-position="right" :min="0"
                    class="inputnumber" />
                  <div v-if="item.dataTypeId == '193'" class="unit">kg</div>
                  <div class="contro-two-zcon" @click="controlequpmentone(item.dataItemId, item.enumListValue)">
                    {{ '启动' }}
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="cameraview-box-two cameraview-box-two-ds">
              <h2>当前无可控设备</h2>
            </div>
          </div>
        </div>
      </div>
      <div class="cameralist-box">
        <div class="cameraview-box-two-line">
          <div class="cameraview-box-two-line-title">策略控制</div>
        </div>
        <div class="cameraview-box-two">
          <div class="celu-but" @click="clickconfigcelue()">配置策略</div>
          <div class="cameraview-box-main">
            <div v-if="tableDeviData.length > 0" class="dig-view">
              <div v-for="(newitem, newindex) in tableDeviData" :key="newindex">
                <i v-show="newitem.tableDeviData.length" class="title-1"></i>
                <div v-show="newitem.tableDeviData.length" v-if="newitem.title.device" class="dig-view-item-title">{{
      newitem.title.device.deviceName }}
                </div>
                <div v-show="newitem.tableDeviData.length" v-for="(newzhitem, newzhindex) in newitem.tableDeviData"
                  :key="'tabone' + newzhindex">
                  <div class="dig-view-item-name">
                    <div v-if="newzhitem.priority" class="dig-view-item-name-line2" :style="{
      backgroundColor: colorList[newzhitem.priority],
    }">{{ priorityList[newzhitem.priority - 1].name }}</div>
                    <div class="dig-view-item-name-line1">策略{{ newzhindex + 1 }}</div>
                  </div>
                  <hr />
                  <div>条件配置</div>
                  <div v-for="(
                        newzhitemone, newzhindexone
                      ) in newzhitem.judgelist" :key="'tabtwo' + newzhindexone">
                    关联关系{{ newzhindexone + 1 }}: 数据项：{{
      changedataitem(newzhitemone.dataItemId)
    }}
                    <br />
                    判断条件：{{ newzhitemone.signBit }} 值:{{
      newzhitemone.value
    }}
                  </div>
                  <hr />
                  <div>控制配置</div>
                  <div v-for="(
                        newzhitemtwo, newzhindextwo
                      ) in newzhitem.controllist" :key="newzhindextwo">
                    关联关系{{ newzhindextwo + 1 }}： 数据项：{{
      changedataitem(newzhitemtwo.dataItemId)
    }}
                    <br />
                    控制时间：{{ newzhitemtwo.controlMinute }} 值:{{
      newzhitemtwo.value
    }}
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="dig-view cameraview-box-two-ds">
              <h2>当前无策略</h2>
            </div>
          </div>
        </div>
      </div>
      <!-- 开关验证码弹框 -->
      <el-dialog :close-on-click-modal="false"  title="输入验证码" :visible.sync="yanzhengcodeview" width="30%">
        <div class="dig-yanzhencode">
          <div>
            <img :src="nowcodeimg" />
            <div class="changecodeimg" @click="openyanzhencode()">看不清换一张</div>
          </div>
          <el-input v-model="nowcodetwo" placeholder="请输入验证码" />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="success" @click="yanzhengcodeview = false">取消</el-button>
          <el-button type="primary" @click="yanzhengcode()">确认执行</el-button>
        </span>
      </el-dialog>
      <!-- 策略配置主弹框 -->
      <el-dialog :close-on-click-modal="false"  title="策略配置" :visible.sync="showpeizhicelue" width="60%">
        <div class="dig-message">
          <div class="dig-line">
            <div class="dig-line-item">
              设备选择：
              <el-select v-model="strategyAllMessage.deviceNo" @change="getdataitemlist">
                <el-option v-for="item in vrtuallist" :key="item.deviceNo" :value="item.deviceNo"
                  :label="item.device ? item.device.deviceName : ''" />
              </el-select>
            </div>
            <div class="dig-line-item">
              上报时间
              <!--(分钟)-->
              ：
              <el-input v-model="strategyAllMessage.strategyuptime" class="input-yem-sty" placeholder="建议五分钟"
                type="number">
                <template slot="append">分钟</template>
              </el-input>
            </div>
          </div>
          <div class="dig-view">
            <div class="dig-view-title">条件配置</div>
            <div class="back">
              <div class="addback" @click="addconditconfig()">
                <i class="el-icon-plus"></i>
              </div>
              <div class="delback" @click="delconditconfig()">
                <i class="el-icon-minus"></i>
              </div>
            </div>
            <div v-for="(
                  itemone, indexone
                ) in strategyAllMessage.conditionConfig" :key="indexone" class="dig-view-main">
              <div class="dig-view-main-item">
                数据项
                <el-select v-model="strategyAllMessage.conditionConfig[indexone].dataItemId
      " clearable class="input-yem-sty">
                  <el-option v-for="(newitem, newindex) in dataitemsList" :key="newindex" :label="newitem.dataItemName"
                    :value="newitem.dataItemId" />
                </el-select>
              </div>
              <div class="dig-view-main-item">
                判断条件
                <el-select v-model="strategyAllMessage.conditionConfig[indexone].signBit
      " class="input-yem-sty">
                  <el-option v-for="(conditem, condindex) in zhconditionlist" :key="condindex" :label="conditem.name"
                    :value="condindex" />
                </el-select>
              </div>
              <div class="dig-view-main-item">
                判断值
                <el-input v-model="strategyAllMessage.conditionConfig[indexone].value" type="number"
                  class="input-yem-sty" />
              </div>
            </div>
          </div>
          <div class="dig-view">
            <div class="dig-view-title">控制策略</div>
            <div class="back">
              <div class="addback" @click="addcontrolconfig()">
                <i class="el-icon-plus"></i>
              </div>
              <div class="delback" @click="delcontrolconfig()">
                <i class="el-icon-minus"></i>
              </div>
            </div>
            <div v-for="(itemtwo, indextwo) in strategyAllMessage.controlConfig" :key="indextwo" class="dig-view-main">
              <div class="dig-view-main-item">
                数据项
                <el-select v-model="strategyAllMessage.controlConfig[indextwo].dataItemId
      " clearable class="input-yem-sty" @change="setcontrolvaluelist($event, indextwo)">
                  <el-option v-for="(newitem, newindex) in dataItemList" :key="newindex"
                    :label="newitem.dataItem.dataItemName" :value="newitem.dataItemId" />
                </el-select>
              </div>
              <div class="dig-view-main-item">
                控制时长
                <!--  (分) -->
                <el-input v-model="strategyAllMessage.controlConfig[indextwo].controlMinute
      " type="number" class="input-yem-sty">
                  <template slot="append">分</template>
                </el-input>
              </div>
              <div class="dig-view-main-item">
                值
                <el-select v-model="strategyAllMessage.controlConfig[indextwo].value" placeholder="请先选择数据项"
                  class="input-yem-sty">
                  <el-option v-for="newvalueitem in itemtwo.valueselectlist" :key="newvalueitem.id"
                    :label="newvalueitem.name" :value="newvalueitem.id" />
                </el-select>
                <!-- <el-input v-model="strategyAllMessage.controlConfig[indextwo].value" placeholder="请先输入数据项" class="input-yem-sty" /> -->
              </div>
            </div>
          </div>
          <div class="dig-line">
            <div class="tempbut green">取消</div>
            <div class="tempbut tempcolor" @click="clicksaveconfig">保存到预览</div>
          </div>
          <div class="celuconfigshowview">
            <div>策略配置预览表</div>
            <el-button v-if="isshowpriorityinput === false" class="showviewbut" type="warning" plain
              @click="clickpriorityconfig()">配置优先级</el-button>
            <el-button v-else class="showviewbut" type="warning" plain @click="savepriorityconfig()">保存优先级</el-button>
          </div>
          <div class="dig-views">
            <div v-for="(newzhitem, newzhindex) in tableData" :key="'tabone' + newzhindex">
              <div class="dig-view-item-name">
                <div class="dig-view-item-name-line1">策略{{ newzhindex + 1 }}</div>
                <div v-if="newzhitem.priority" class="dig-view-item-name-line2"
                  :style="{ backgroundColor: colorList[newzhitem.priority] }">{{ priorityList[newzhitem.priority -
      1].name }}</div>
                <div v-if="isshowpriorityinput" class="dig-view-item-name-line3">
                  <el-select v-model="newzhitem.priority" placeholder="暂无优先级">
                    <el-option v-for="(proitem, proindex) in priorityList" :key="proindex" :value="proitem.value"
                      :label="proitem.name" />
                  </el-select>
                </div>
              </div>
              <div>条件配置</div>
              <div v-for="(newzhitemone, newzhindexone) in newzhitem.judgelist" :key="'tabtwo' + newzhindexone">
                关联关系{{ newzhindexone + 1 }}: 数据项：{{
      changedataitem(newzhitemone.dataItemId)
    }}
                判断条件：
                <span v-if="newzhitemone.signBit">
                  {{
      `&${newzhitemone.signBit};`
    }}
                </span>
                值:{{ newzhitemone.value }}
              </div>
              <div>控制配置</div>
              <div v-for="(newzhitemtwo, newzhindextwo) in newzhitem.controllist" :key="newzhindextwo">
                关联关系{{ newzhindextwo + 1 }}： 数据项：{{
      changedataitem(newzhitemtwo.dataItemId)
    }}
                控制时间：{{ newzhitemtwo.controlMinute }} 值:{{
      newzhitemtwo.value
    }}
              </div>
              <div style="display: flex; align-item: center">
                <div class="tempbut tempcolor" @click="delconfigconditiondata(newzhitem)">删除</div>
                <div v-if="!newzhitem.status" class="tempbut tempcolor" @click="editconfigconditiondata(newzhitem)">
                  启用策略</div>
                <div v-if="newzhitem.status" class="tempbut green" @click="editconfigconditiondata(newzhitem)">停用策略
                </div>
              </div>
            </div>
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button type="success" @click="showpeizhicelue = false">取消</el-button>
          <!-- <el-button @click="showpeizhicelue = false">取 消</el-button> -->
          <el-button :disabled="isshowpriorityinput" type="primary" @click="openyanzhencode()">执行策略</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import MainSlot from "@/components/MainSlot";
import TableData from '@/components/TableData';
import zhechart from "@/components/Echarts/components/linechart/chartYaxios.vue";
import TreePond from '@/components/TreePond';
import zhcameralist from "./component/cameralist.vue";
import nowpagereq from '@/api/basicInformation/camera';
import countDown from "@/components/count-down/index";
import EZUIKit from 'ezuikit-js';
import { mapGetters } from 'vuex'
var player = null
export default {
  name: "DeviceRemoteControl",
  components: { MainSlot, TableData, zhechart, TreePond, countDown, zhcameralist },
  data() {
    return {
      // 加载动效
      startTime: 60,
      cricleAdd: false,
      showscreen: true,
      startUp: "false",
      loading: true,
      // ---优先级相关---
      // 是否展示等级配置输入框
      isshowpriorityinput: false,
      priorityList: [
        { name: "一级", value: 1 },
        { name: "二级", value: 2 },
        { name: "三级", value: 3 },
        { name: "四级", value: 4 },
        { name: "五级", value: 5 },
        { name: "六级", value: 6 },
        { name: "七级", value: 7 },
        { name: "八级", value: 8 }
      ],
      // 等级颜色列表
      colorList: [
        "rgba(254, 83, 57, 1)",
        "rgba(254, 170, 57, 1)",
        "rgba(165, 214, 63, 1)",
        "rgba(67, 207, 124, 1)",
        "rgba(0, 186, 173, 1)",
        "rgba(42, 130, 228, 1)",
        "rgba(121, 72, 234, 1)",
        "rgba(172, 51, 193, 1)"
      ],
      // -----
      // 验证码弹框
      yanzhengcodeview: false,
      // 验证码
      nowcode: "",
      // 验证码图片
      nowcodeimg: "",
      nowcodetwo: "",
      // 临时存储的设备开关信息
      nowcontrolmessage: {
        zhid: "",
        zhkey: "",
        zhindex: ""
      },
      // 展示已存储策略
      isshowhassave: false,
      tableData: [],
      tableDeviData: [],
      // 详细的一条策略
      lastshowvis: false,
      xiangxideceluone: {
        judgelist: [],
        controllist: [],
        reportTime: ""
      },
      // 是否展示配置策略对话框
      showpeizhicelue: false,
      // 展示已存储策略的选择的虚拟设施id
      showdeviceNo: "",
      // 策略配置信息
      strategyAllMessage: {
        deviceNo: "", // 虚拟设备id
        strategyuptime: 5, // 上报时间
        // 条件配置相关
        conditionConfig: [
          { dataItemId: "", signBit: "", value: "", judgeSign: "begin" }
        ],
        // 控制策略相关
        controlConfig: [
          {
            dataItemId: "",
            controlMinute: "",
            value: "",
            controlSign: "begin",
            valueselectlist: [{ name: "暂无数据", id: 0 }]
          }
        ]
      },
      // 条件判断list equals = gte  >= gt > lte <= lt<
      zhconditionlist: [
        {
          name: "=",
          value: "equals"
        },
        {
          name: ">=",
          value: "gte"
        },
        {
          name: ">",
          value: "gt"
        },
        {
          name: "<=",
          value: "lte"
        },
        {
          name: "<",
          value: "lt"
        }
      ],
      // 控制策略的值list
      valueselectlist: [
        {
          id: 0,
          name: "禁用"
        },
        {
          id: 1,
          name: "启用"
        }
      ],
      // 可选择数据项
      dataItemList: [],
      dataitemsList: [],
      // 可选择虚拟设备
      vrtuallist: [],
      // 获取可控制设备
      controshebeilist: [],
      // 点击开关index
      controkaiguanindex: "",
      // 表格选中id
      tableselectidlist: "",
      // 当前选中地块组名或地亏啊名
      facilityName: "",
      // 当前选中cameraindex
      nowcameraindex: "",
      addcameraVisible: false,
      paramslist: {},
      cameralist: [],
      // 当前视频播放地址
      nowcameraurl: "",
      // 是否展示视频窗口
      showFace: "transCamera",
      timer: null,
      strategyControlbtnFlag: false,
      remoteControlbtnFlag: false,
    };
  },
  watch: {},
  computed: {
    ...mapGetters([
      'codeList'
    ])
  },
  mounted() {
    this.strategyControlbtnFlag = this.codeList.indexOf('strategyControl') !== -1;
    this.remoteControlbtnFlag = this.codeList.indexOf('remoteControl') !== -1;
  },
  deactivated() {
    clearTimeout(this.timer);
    this.timer = null;
    player.stop();
  },
  // beforeDestroy() {
  //   clearTimeout(this.timer);
  //   this.timer = null;
  //   player && player && player.stop && player.stop();
  // },
  methods: {
    showscreenT() {
      if (this.showscreen) {
        this.showscreen = false;
        player.fullScreen();
      } else {
        this.showscreen = true;
        player.cancelFullScreen();
      }
    },
    // 点击配置优先级
    clickpriorityconfig() {
      this.isshowpriorityinput = true;
    },
    async getSetcet() {
      const { data: res } = await nowpagereq.getdataitem();
      this.dataitemsList = res;
    },
    // 点击保存优先级
    savepriorityconfig() {
      // 是否都有优先级
      let ishaspriority = true;
      // 是否 没有相同的优先级
      let isnosamepriority = true;
      let listone = [];
      this.tableData.forEach(itemone => {
        if (itemone.priority) {
          let mesone = {
            priority: itemone.priority,
            deviceStrategyId: itemone.deviceStrategyId,
            organizationNo: sessionStorage.organizationNo
          };
          // console.log(itemone.deviceStrategyId)
          let hasmesstau = false;
          listone.forEach(itemtwo => {
            if (itemtwo.priority === itemone.priority) {
              hasmesstau = true;
            }
          });
          if (hasmesstau === false) {
            listone.push(mesone);
          } else {
            isnosamepriority = false;
          }
        } else {
          ishaspriority = false;
        }
      });
      if (ishaspriority && isnosamepriority) {
        nowpagereq.editconfigpriority(listone).then(resone => {
          if (resone.code === 1) {
            this.gethassavetable();
            this.$message.success("保存优先级成功");
            this.isshowpriorityinput = false;
          } else {
            this.gethassavetable();
            this.$message.error("配置优先级失败");
          }
        });
      } else if (ishaspriority === false) {
        this.$message.error("请配置所有优先级！");
      } else if (isnosamepriority === false) {
        this.$message.error("请勿配置相同优先级！");
      }
    },
    // 打开验证码弹框-重新获取验证码
    openyanzhencode() {
      this.nowcodetwo = "";
      this.yanzhengcodeview = true;
      // 获取随机的验证码和图片
      nowpagereq.getcodeimg().then(codres => {
        let listone = codres.data;
        if (listone) {
          this.nowcode = listone.stringCode;
          this.nowcodeimg = "data:image/png;base64," + listone.pictureData;
        }
      });
    },
    // 点击确认按钮
    yanzhengcode() {
      if (this.nowcodetwo === this.nowcode) {
        this.yanzhengcodeview = false;
        if (this.showpeizhicelue) {
          // console.log("准备调用物联网接口")
          this.zhixingtask();
        } else {
          this.controlequpment();
        }
      } else {
        this.$message.error("请输入正确的验证码");
      }
    },
    // 查看详情
    chakanxiangqin(e) {
      this.xiangxideceluone = e;
      // 循环转化
      this.xiangxideceluone.judgelist.forEach((item, index) => {
        this.zhconditionlist.forEach((itemtwo, indextwo) => {
          if (itemtwo.value === item.signBit) {
            this.xiangxideceluone[index].signBit = indextwo;
          }
        });
      });
      this.lastshowvis = true;
    },
    // 点击配置策略
    // clickpeizhicelue() {
    //   this.isshowhassave = true
    //   this.tableData = []
    // },
    // 获取已存储表格
    gethassavetable(e) {
      let par = {
        deviceNo: this.strategyAllMessage.deviceNo || e,
        organizationNo: sessionStorage.organizationNo
      };
      if (par.deviceNo.length === 0) {
        return;
      }
      nowpagereq.queryhassaveconfig(par).then(res => {
        this.tableData = res.data || [];
      });
    },
    // 获取已存储表格
    async gethassavetables(e) {
      this.tableDeviData = [];
      // console.log(e)

      await e.forEach((item, index) => {
        let par = {
          deviceNo: item.deviceNo,
          organizationNo: sessionStorage.organizationNo
        };
        // console.log(par)

        if (par.deviceNo.length === 0) {
          return;
          // this.$message.warning("请先选择一个虚拟设备")
        }
        nowpagereq.queryhassaveconfig(par).then(res => {
          // index报错
          // this.tableDeviData[index] =
          // console.log(index, item, res.data)

          this.$set(this.tableDeviData, index, {
            title: item,
            tableDeviData: res.data
          });
          // this.$set(this.tableDeviData[index], 'tableDeviData', res.data)
          // this.addblankmet()
        });
      });
      // console.log(this.tableDeviData)
    },
    //
    // 表格相关
    handleSelectionChange(e) {
      // console.log(e);
    },
    handleEdit(e) {
      // console.log(e);
    },
    // 点击保存策略
    clicksaveconfig() {
      let params = {
        deviceNo: this.strategyAllMessage.deviceNo,
        controllist: this.strategyAllMessage.controlConfig,
        judgelist: JSON.parse(
          JSON.stringify(this.strategyAllMessage.conditionConfig)
        ),
        reportTime: this.strategyAllMessage.strategyuptime,
        status: false
      };
      if (this.strategyAllMessage.deviceNo === "") {
        this.$message.warning("请选择虚拟设备！");
      }
      if (params.controllist == [] || params.judgelist == []) {
        this.$message.warning("数据至少配置一条");
        return;
      }
      params.judgelist.forEach((yuitem, yuindex) => {
        params.judgelist[yuindex].signBit = JSON.parse(
          JSON.stringify(this.zhconditionlist[yuitem.signBit].value)
        );
      });
      params.controllist = this.strategyAllMessage.controlConfig.map(
        conitem => {
          return {
            dataItemId: conitem.dataItemId,
            controlMinute: conitem.controlMinute,
            value: conitem.value,
            controlSign: conitem.controlSign
          };
        }
      );
      // console.log(params.judgelist);
      // if
      nowpagereq.addconfigconditiondata(params).then(res => {
        if (res.code === 1) {
          this.$message.success("保存到预览成功");
          this.gethassavetable();
        } else {
          this.$message.warning("保存到预览失败");
        }
        // this.showpeizhicelue = false
        // 
      });
    },
    // 点击删除策略
    delconfigconditiondata(e) {
      nowpagereq.delconfigconditiondata([e.deviceStrategyId]).then(res => {
        if (res.code === 1) {
          this.$message.success("删除成功");
          this.gethassavetable();
        } else {
          this.$message.warning("删除失败");
        }
      });
    },
    // 修改策略--启用或者停用策略
    editconfigconditiondata(e) {
      let param = {
        deviceStrategyId: e.deviceStrategyId,
        status: !e.status
      };
      nowpagereq.editconfigconditiondata(param).then(res => {
        if (res.code === 1) {
          if (e.status === false) {
            this.$message.success("启用策略成功！");
          } else if (e.status === true) {
            this.$message.success("停用策略成功！");
          }
          this.gethassavetable();
        } else {
          this.$message.warning("修改失败");
        }
      });
    },
    // --- ****点击执行策略方法**** ---
    zhixingtask() {
      let list = this.tableData;
      let newlist = {
        reportTime: this.strategyAllMessage.reportTime,
        paramList: []
      };
      let isreq = true;
      if (list.length > 0) {
        list.forEach((itemtwo, indextwo) => {
          if (itemtwo.status) {
            let judgelistone = [];
            itemtwo.judgelist.forEach((itemthree, indexthree) => {
              let judgelisttwo = {
                dataItemId: itemthree.dataItemId,
                judgeSign: itemthree.judgeSign,
                signBit: itemthree.signBit,
                value: itemthree.value
              };
              judgelistone.push(judgelisttwo);
            });
            let controllistone = [];
            itemtwo.controllist.forEach((itemthree, indexthree) => {
              let controllisttwo = {
                dataItemId: itemthree.dataItemId,
                controlSign: itemthree.controlSign,
                controlMinute: itemthree.controlMinute,
                value: itemthree.value
              };
              controllistone.push(controllisttwo);
            });
            // 没有优先级调用接口失败
            if (itemtwo.priority) {
              let newobjpus = {
                priority: itemtwo.priority,
                controllist: controllistone,
                judgelist: judgelistone
              };
              newlist.paramList.push(newobjpus);
            } else {
              isreq = false;
            }
          }
        });
        if (isreq === false) {
          this.$message.error("请先配置策略优先级");
          return;
        }
      }
      // return;
      nowpagereq.editrtualdevice(newlist).then(res => {
        if (res.data) {
          let newmessageone = res.data;
          let pusmessage = {
            rtuRunStrategyNewId: newmessageone.rtuRunStrategyNewId,
            tableName: newmessageone.tableName,
            enable: true,
            deviceNo: this.strategyAllMessage.deviceNo
          };
          this.editlastmetone(pusmessage);
        } else {
          this.$message.error("启用策略失败：errcode1！");
        }
      });
    },
    // 修改状态
    editlastmetone(e) {
      let param = e;
      nowpagereq.neweditconfigconditiondata(param).then(res => {
        if (res.code === 1) {
          this.$message.success("执行策略成功！");
          this.gethassavetable();
        } else {
          this.$message.warning("修改失败");
        }
      });
    },
    // 点击配置策略 ->展示策略
    // clicksettingconfig() {
    //   this.isshowhassave = false
    // },
    // 点击配置策略
    clickconfigcelue() {
      if (!this.strategyControlbtnFlag) {
        this.$message.warning('无权限操作')
        return
      }
      this.showpeizhicelue = true;
      this.strategyAllMessage = {
        deviceNo: "", // 虚拟设备id
        strategyuptime: 5, // 上报时间
        // 条件配置相关
        conditionConfig: [
          { dataItemId: "", signBit: "", value: "", judgeSign: "begin" }
        ],
        // 控制策略相关
        controlConfig: [
          { dataItemId: "", controlMinute: "", value: "", controlSign: "begin" }
        ]
      };
      this.tableData = [];
      this.dataItemList = [];
    },
    // 增加一条条件配置信息
    addconditconfig() {
      let pusobj = {
        dataItemId: "",
        signBit: "",
        value: "",
        judgeSign: "and"
      };
      if (this.strategyAllMessage.conditionConfig.length === 0) {
        pusobj.judgeSign = "begin";
      }
      this.strategyAllMessage.conditionConfig.push(pusobj);
    },
    // 减少一条条件配置信息
    delconditconfig() {
      this.strategyAllMessage.conditionConfig.pop();
    },
    // 增加一条控制策略信息
    addcontrolconfig() {
      let pusobj = {
        dataItemId: "",
        controlMinute: "",
        value: 0,
        judgeSign: "and",
        valueselectlist: []
      };
      if (this.strategyAllMessage.controlConfig.length === 0) {
        pusobj.judgeSign = "begin";
      }
      this.strategyAllMessage.controlConfig.push(pusobj);
    },
    // 减少一条控制策略信息
    delcontrolconfig() {
      this.strategyAllMessage.controlConfig.pop();
    },
    // 点击策略控制的某个数据项
    setcontrolvaluelist(e, i) {
      // console.log(e);

      let listone = this.dataItemList;
      listone.forEach(itemone => {
        // console.log(itemone);

        if (itemone.dataItemId === e) {
          if (itemone.dataItem.enumListType) {
            console.log(itemone.dataItem.enumListType);
            this.strategyAllMessage.controlConfig[
              i
            ].valueselectlist = this.handelthree(itemone.dataItem.enumListType);
          }
        }
      });
    },
    // 点击取消配置
    cacelconfig() {
      this.$confirm("确认是否取消该策略？")
        .then(_ => { })
        .catch(_ => { });
    },
    // 获取地块或设施组下可控制设备
    getcontroshebeilist() {
      nowpagereq.getcontroshebeilist(this.paramslist).then(res => {
        this.controshebeilist = res.data || [];

        this.handel();
      });
    },
    // 获取数据项选择项和表格
    getdataitemlist(e) {
      // 获取数据项选择项
      nowpagereq.getdataitemtwo(e).then(res => {
        if (res.code === 0) {
          this.$message.error("数据项名称获取失败");
        } else {
          this.gethassavetable();
          // this.dataItemList = res.data;
          let list = [], list2 = []
          res.data.map(el => {
            list.push(el.dataItem)
            if (el.dataItem.control) {
              list2.push(el)
            }
          });
          this.dataItemList = list2;
          this.dataitemsList = list;
        }
      });
    },
    // 将dataitemid => dataitemname
    changedataitem(id) {
      var name = "";
      if (this.dataItemList.length > 0) {
        this.dataItemList.forEach(item => {
          if (item.dataItemId === id) {
            name = item.dataItemName;
          }
        });
      }
      return name;
    },
    // 大于
    // 获取虚拟设备下拉选择
    getvrtuallist(e) {
      nowpagereq.getvrtuallist(e).then(res => {
        if (res.code === 0) {
          this.$message.error("数据项名称获取失败");
        }
        this.vrtuallist = res.data || [];
        if (this.vrtuallist) {
          // console.log(this.vrtuallist)
          this.gethassavetables(this.vrtuallist);
        } else {
          this.tableDeviData = [];
        }
      });
    },
    // 存储数据并且弹出验证码弹框
    controlequpmentone(id, key, indexone) {
      if (!this.remoteControlbtnFlag) {
        this.$message.warning("无权限操作");
        return
      }
      this.nowcontrolmessage = {
        zhid: id,
        zhkey: key,
        zhindex: indexone
      };
      this.openyanzhencode();
    },
    // 控制机器开关状态-------不可轻易调用
    controlequpment() {
      var params = {
        dataItemId: this.nowcontrolmessage.zhid,
        operation: parseInt(this.nowcontrolmessage.zhkey)
      };
      // console.log(params);

      // return;
      nowpagereq.setshebeikiaguanstau(params).then(res => {
        // 返回值需要确认下
        if (res.data) {
          this.$message.success(res.msg || "控制成功!");
        }
      });
      // 点击开关刷新状态,加五秒延迟
      var _that = this;
      setTimeout(function () {
        _that.getequipmentStau(
          this.nowcontrolmessage.zhid || '',
          this.nowcontrolmessage.zhindex || 0
        );
      }, 5000);
    },
    // 处理开关字符串 -- 并且获取所有状态
    handel() {
      if (this.controshebeilist) {
        this.controshebeilist.forEach((item, index) => {
          if (item.enumListType) {
            item["enumListTypetwo"] = this.handeltwo(item.enumListType);
          } else {
            this.$set(item, "enumListValue", 1);
          }

          this.getequipmentStau(item.dataItemId, index);
        });
      }
    },
    handeltwo(str) {
      var controlslist = [];
      // str = "0:关;1:开"
      var arr = str.split(";");
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].length > 0) {
          var diy = arr[i].split(":");
          controlslist.push({
            name: diy[1],
            value: diy[0]
          });
        }
      }
      return controlslist;
    },
    handelthree(str) {
      var controlslist = [];
      // str = "0:关;1:开"
      var arr = str.split(";");
      for (var i = 0; i < arr.length; i++) {
        // console.log(arr[i])
        if (arr[i].length > 0) {
          var diy = arr[i].split(":");
          controlslist.push({
            name: diy[1],
            id: diy[0]
          });
        }
      }
      return controlslist;
    },
    // 获取机器状态
    getequipmentStau(id, indexoo) {
      console.log(this.controshebeilist);
      var data = {
        dataCollectNewId: id
      };
      nowpagereq.getshebeikiaguanstau(data).then(res => {
        if (res.data) {
          let value = res.data[0]?.lastValue1;
          this.$set(
            this.controshebeilist[indexoo],
            "enumListValue",
            value || 1
          );
          if (value === 0) {
            this.$set(this.controshebeilist[indexoo], "nowstau", "已关闭");
          }
          if (value === 1) {
            this.$set(this.controshebeilist[indexoo], "nowstau", "已开启");
          }
        } else {
          this.$set(this.controshebeilist[indexoo], "nowstau", "暂无数据");
        }
        console.log(this.controshebeilist);
      });
    },
    // 获取机器状态,返回不同颜色
    getequipmentStyle(nowstau) {
      if (nowstau === "已关闭") {
        return "#ff0000";
      }
      if (nowstau === "已开启") {
        return "#00ff33";
      }
    },
    // 获取相机地址
    getcamerurl(e, method = undefined) {
      // this.isshowcameraview = false;
      // if (!e) {
      //   this.isshowcameraview = false
      //   this.Insufficient = true
      //   return
      // } else if (e === "流量不足") {
      //   this.isshowcameraview = false
      //   this.Insufficient = false
      //   return
      // }
      player?.stop();
      if (document.getElementById('video-container-wrap')) {
        let e = document.getElementById("video-container-wrap");
        e.style.display = "none";
      }
      this.loading = false;
      if (e === "transCamera") {
        // 切换摄像头
        this.showFace = "transCamera";
        this.loading = false;
        this.cricleAdd = false;
        clearTimeout(this.timer);
        return;
      } else if (e === "downFlow") {
        // 流量不足无法播放
        this.showFace = "downFlow";
        this.loading = false;
        return;
      } else if (e === "notCameraData") {
        // 未获取到该摄像头数据
        this.showFace = "notCameraData";
        this.loading = false;
        return;
      } else if (e === "notCameraList") {
        // 暂无摄像头
        this.showFace = "notCameraList";
        this.loading = false;
        return;
      } else if (e === "timeout") {
        this.showFace = "timeout";
        this.loading = false;
        return;
      }
      this.nowcameraurl = e;
      let that = this;
      setTimeout(() => {
        // 正常播放
        this.showFace = "play";
        console.log(e, method)

        if (player !== null) {
          player && player.stop && player.stop();
        }
        if (method !== undefined) {
          player = new EZUIKit.EZUIKitPlayer({
            audio: 1, enableSharedArrayBufferGuide: true, width: 1980,
            height: 1080, template: 'security', ...method,
            handleError: function (e) {
              that.$refs.cameralist.sendErrorInfo(e)
            },
            handleSuccess: function (e) {
              that.$refs.cameralist.sendWebSocket(200)
            },
          })
          player && player.stop && player.stop().then(() => {
            player.play();
          });
        }
        // this.testsetstyledom()
      }, 200);
    },
    setCameraInfo(cameraInfo) {
      this.$refs.cameracontrol.cameraInfoList = cameraInfo
      this.$refs.cameracontrol.cameraId = cameraInfo.cameraId
    },
    // 点击树状触发方法
    treeselectvalue(e) {
      let dd = e.organizationNo;
      this.paramslist = {};
      if (!dd) {
        this.$message.warning("请勿选择此地块组");
        return;
      }
      this.facilityName = e.facilityName;
      this.addActive = true;
      if (e.facilityGroupNo) {
        this.paramslist["facilityGroupNo"] = e.facilityGroupNo;
        this.paramslist["organizationNo"] = sessionStorage.organizationNo;
      } else if (e.facilityNo) {
        this.paramslist["facilityNo"] = e.facilityNo;
        this.paramslist["organizationNo"] = sessionStorage.organizationNo;
        this.$refs.cameralist.wsClientClose()
        this.getTableDataList();
        this.getcontroshebeilist();
        this.getvrtuallist(this.paramslist);
      }
      // this.paramslist["organizationNo"] = e.organizationNo;

      // facilityGroupNo
      // console.log(this.paramslist);
    },
    // 获取相机列表数据
    getTableDataList() {
      let e = this.paramslist;
      // console.log(e)
      this.paramslist = {};
      if (e.facilityGroupNo) {
        // this.paramslist["facilityGroupNo"] = e.facilityGroupNo;
        // let param = {
        //   page: 1,
        //   size: 10
        // };
        // let partwo = {
        //   facilityGroupNo: e.facilityGroupNo
        // };
        // nowpagereq.getlist(param, partwo).then(res => {
        //   let data = res.data.content;
        //   this.cameralist = data;
        // });
        // return;
      } else if (e.facilityNo) {
        this.paramslist["facilityNo"] = e.facilityNo;
        let param = {
          page: 1,
          size: 10,
          entity: {
            organizationNo: sessionStorage.organizationNo
          }
        };
        let partwo = {
          facilityNo: e.facilityNo
        };
        nowpagereq.getlist(param, partwo).then(res => {
          let data = res.data.content;
          this.cameralist = data;
        });
      }
    },
    // 尝试直接操作dom元素
    testsetstyledom() {
      var testDiv = document.getElementById("iframe-btn-container");
      testDiv.style.display = "block";
      // for (var i = 0, len = testDiv.style.length; i < len; i++) { // IE 9+、Safari、Chrome、Firefox、Opera 9+
      //   var prop = testDiv.style[i];
      //   var value = testDiv.style.getPropertyValue(prop);
      //   console.log(prop + ": " + value);
      // }
      // testDiv.style.cssText = "width:25px; height: 100px;background-color:green";
      // console.log(testDiv.style.cssText);
    },
    // 点击相机，获取相机数据，拼接完整video路径
    clickcamerames(e) {
      let nowcamerid = e.cameraid;
      console.log(nowcamerid);
    },
    // 参数1：时长 参数2：是否预热
    handleLoading(durTime, startUp) {
      this.timer = null;
      this.startUp = startUp;
      this.startTime = 60;
      this.cricleAdd = true;
      this.timer = setTimeout(() => {
        this.cricleAdd = false;
      }, durTime * 60000);
    },
    // 填充表格空白行
    addblankmet() {
      let havline = this.tableData.length % 6;
      if (this.tableData.length < 6) {
        if (havline < 6) {
          const remain = 6 - havline;
          for (var i = 0; i < remain; i++) {
            this.tableData.push({ indflag: i + this.tableData.length - 1 });
          }
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.layout {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 15px;
  box-sizing: border-box;

  .cameraContent {
    width: calc(100% - 315px);
    overflow: auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
  }

  .tree {
    width: 300px !important;
    height: 100%;
    padding: 10px;
    background-color: #ffffff;
    box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.05);
    border-radius: 6px;
  }
}

::v-deep .slotModule {
  padding: 10px;
  background: #f3f3f3;
  box-shadow: none;
}
</style>
<style lang="scss" scoped>
.tempbut {
  min-width: 40px;
  height: 30px;
  // background-color: rgb(146, 31, 31);
  margin-right: 10px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
  color: rgb(206, 201, 201);
  border-radius: 5px;
}

.tempbut:hover {
  color: #feffff;
}

.green {
  background-image: linear-gradient(to bottom, #adec6e, #69d75b, #31c54d);
  border-color: #dce8e6;
}

.tempcolor {
  background-color: #0095b4;
}

.red {
  background-color: #ff0000;
}

.zhdigtwo {
  width: 100%;
  min-height: 400px;
}

.back {
  position: absolute;
  display: flex;
  top: 58px;
  right: 60px;
}

.addback {
  width: 30px;
  height: 30px;
  border: 2px solid #006e91;
  border-radius: 3px;
  // background-size: 30px;
  // background-repeat: no-repeat;
  // background-position: center;
  // background-image: url('~@/assets/commont/add.png');
  cursor: pointer;
  margin-left: 5px;

  i {
    width: 100%;
    height: 100%;
    line-height: 27px;
    font-weight: 600;
    text-align: center;
    color: #006e91;
  }
}

.delback {
  width: 30px;
  height: 30px;
  border: 2px solid #006e91;
  border-radius: 3px;
  // background-size: 30px;
  // background-repeat: no-repeat;
  // background-position: center;
  // background-image: url('~@/assets/commont/dell.png');
  cursor: pointer;
  margin-left: 5px;

  i {
    width: 100%;
    height: 100%;
    line-height: 26px;
    color: #006e91;
    font-weight: 600;
    text-align: center;
  }
}

// 验证码
.dig-yanzhencode {
  width: 100%;
  height: 100px;
  // background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  .changecodeimg {
    width: 80px;
    margin-top: 2px;
    cursor: pointer;
    margin-bottom: 6px;
    white-space: nowrap;
    font-size: 13px;
    color: #fff;
    border-bottom: #fff 1px solid;
  }

  .changecodeimg:hover {
    color: rgb(26, 170, 175);
    border-color: rgb(26, 170, 175);
  }
}

.dig-message {
  color: #959595;
  width: 100%;
  min-height: 400px;
  max-height: 600px;
  overflow: auto;

  .dig-tip {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 10px;
    margin-bottom: 2px;
    color: #959595;
    // color: #e2e2e261;
  }

  .dig-line {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;

    .dig-line-item {
      color: #000;
      // width: 46%;
      margin-right: 2%;
      align-items: center;
      height: 50px;
      display: flex;
    }
  }

  .dig-view {
    border: 1px dashed #e2e2e261;
    padding: 5px;
    min-height: 100px;
    margin-top: 10px;
    position: relative;

    .dig-view-title {
      color: #006e91;
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-weight: 600;
      font-size: 20px;
      display: flex;
    }

    .dig-view-main {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;

      .dig-view-main-item {
        color: #000;
        width: 280px;
        height: 60px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        justify-content: space-between;
        margin-right: 10px;
        overflow: auto;

        .el-select ::v-deep .el-input__inner {
          color: #000 !important;
        }
      }
    }

    .dig-view-item-name {
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 5px;
      height: 30px;
      line-height: 30px;

      .dig-view-item-name-line2 {
        width: 50px;
        height: 20px;
        margin-left: 5px;
        color: #fff;
        border-radius: 20px;
        // background-color: rgb(204, 184, 184);
        text-align: center;
        line-height: 20px;
      }

      .dig-view-item-name-line3 {
        width: 150px;
        height: 20px;
        margin-left: 10px;
        color: #fff;
        // background-color: rgb(204, 184, 184);
        line-height: 20px;

        ::v-deep.el-input__inner {
          width: 120px;
          height: 30px;
          line-height: 20px;
          display: flex;
          align-items: center;
        }

        ::v-deep.el-input--medium .el-input__icon {
          line-height: 13px;
        }
      }
    }
  }

  .dig-views {
    border: 1px dashed #e2e2e261;
    padding: 5px;
    min-height: 100px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #d3d9e2;

    .dig-view-title {
      color: #006e91;
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-weight: 600;
      font-size: 20px;
      display: flex;
    }

    >div {
      width: 50%;
    }

    .dig-view-main {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;

      .dig-view-main-item {
        color: #000;
        width: 280px;
        height: 60px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        justify-content: space-between;
        margin-right: 10px;
        overflow: auto;

        .el-select ::v-deep .el-input__inner {
          color: #000 !important;
        }
      }
    }

    .dig-view-item-name {
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 5px;
      height: 30px;
      line-height: 30px;

      .dig-view-item-name-line2 {
        width: 50px;
        height: 20px;
        margin-left: 5px;
        color: #fff;
        border-radius: 20px;
        // background-color: rgb(204, 184, 184);
        text-align: center;
        line-height: 20px;
      }

      .dig-view-item-name-line3 {
        width: 150px;
        height: 20px;
        margin-left: 10px;
        color: #fff;
        // background-color: rgb(204, 184, 184);
        line-height: 20px;

        ::v-deep.el-input__inner {
          width: 120px;
          height: 30px;
          line-height: 20px;
          display: flex;
          align-items: center;
        }

        ::v-deep.el-input--medium .el-input__icon {
          line-height: 13px;
        }
      }
    }
  }

  .celuconfigshowview {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #000;

    >div:first-child {
      color: #006e91;
      height: 40px;
      line-height: 40px;
      font-weight: 600;
      font-size: 20px;
    }

    .showviewbut {
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      padding: 0;
    }
  }
}

.cameraview-box {
  width: calc(100% - 315px);
  min-width: 900px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;

  .cameraview-box-one {
    border: 8px double #fff;
    background-color: #363839;
    width: calc(70% - 15px);
    height: calc(50% - 15px);
    position: relative;

    .cricle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .allScream {
      position: absolute;
      font-size: 16px;
      right: 10px;
      bottom: 10px;
    }
  }

  .allcameramain {
    height: calc(50% - 15px);
    width: 30%;
    background: #ffffff;
    box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.05);
    border-radius: 6px;
  }

  .cameraview-box-two-line {
    width: 100%;
    line-height: 30px;
    font-size: 20px;
    text-align: center;

    .cameraview-box-two-line-title {
    width: 100%;
      height: 38px;
      line-height: 36px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      line-height: 50px;
      color: #4381b5;
      font-size: 20px;
      font-weight: bolder;
    }
  }

  .cameraview-box-two {
    width: 100%;
    max-height: calc(100% - 30px);
    padding: 5px 15px 15px 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow: auto;

    .zh-contro {
      border-radius: 5px;
      margin:5px;
      background: #d6ecff;
      padding: 10px;

      .contro-one {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 10px;

        .contro-one-title {
          font-size: 16px;
        }

        .contro-one-stau {
          font-size: 17px;
        }
      }

      .contro-two {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: relative;

        .contro-two-zcon {
          border: solid 1px #00718f;
          height: 30px;
          width: 70px;
          line-height: 28px;
          text-align: center;
          font-size: 16px;
          border-radius: 15px;
          margin: 0 10px;
          cursor: pointer;
        }

        .contro-two-zcon:hover {
          background: linear-gradient(180deg, #61b9e2 0%, #0991c7 100%);
          color: #fff;
        }

        .contro-two-zcon-select {
          background-color: #fff;
          color: #003947;
        }

        .contro-two-zcons {
          background-color: #fff;
          color: #003947;
        }

        .inputnumber {
          width: 70px;
          border-radius: 10rpx;
        }

        .unit {
          position: absolute;
          top: 15px;
          left: 95px;
        }
      }
    }
  }
}

.cameralist-box {
  width: 300px;
  min-width: 240px;
  margin-left: 15px;
  height: 100%;
  text-align: center;
  position: relative;
  background-color: #ffffff;
  box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.05);
  border-radius: 6px;

  .cameraview-box-two-line {
    width: 100%;
    height: 30px;
    line-height: 30px;
    position: absolute;
    top: 0px;
    font-size: 20px;
    text-align: center;
    display: flex;
    justify-content: center;

    .cameraview-box-two-line-title {
      width: 180px;
      height: 38px;
      line-height: 50px;
      background-repeat: no-repeat;
      background-position: center;
      color: #4381b5;
      font-weight: bolder;
    }
  }

  .cameraview-box-two {
    width: 100%;
    height: calc(100% - 60px);
    padding: 10px;
    padding-top: 20px;
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    // overflow: auto;
    .zh-contro {
      width: 250px;
      height: 90px;
      border: #fff 1px solid;
      border-radius: 5px;
      margin: 5px 0;

      .contro-one {
        display: flex;
        justify-content: space-between;
        padding: 10px;

        .contro-one-title {
          font-size: 16px;
        }

        .contro-one-stau {
          font-size: 17px;
        }
      }

      .contro-two {
        width: 250px;
        display: flex;
        justify-content: space-around;

        .contro-two-zcon {
          border: solid 1px #fff;
          height: 30px;
          width: 100px;
          line-height: 30px;
          text-align: center;
          font-size: 20px;
          border-radius: 5px;
          cursor: pointer;
        }

        .contro-two-zcon:hover {
          background-color: #fff;
          color: #003947;
        }

        .contro-two-zcon-select {
          background-color: #fff;
          color: #003947;
        }

        .contro-two-zcons {
          background-color: #fff;
          color: #003947;
        }
      }
    }

    .cameraview-box-main {
      height: 90%;
      width: 100%;

      .dig-view {
        width: 100%;
        height: 99%;
        overflow-y: auto;
        padding: 20px 5px 5px 5px;
        min-height: 100px;
        margin-top: 10px;

        >div {
          width: 100%;
          opacity: 1;
          border-radius: 8px 8px 0px 0px;
          padding: 8px;
          position: relative;

          .title-1 {
            display: inline-block;
            width: 90%;
            left: 5%;
            position: absolute;
            top: -1px;
            border-top: 1px solid;
            border-image: linear-gradient(90deg,
                #005e7700,
                #00fff7,
                #005e7700) 30 1;
          }

          .dig-view-item-title {
            position: absolute;
            top: -24px;
            width: 70%;
            text-align: center;
            left: 15%;
            background-color: #013b4d;
            color: #00fff7;
            font-weight: 500;
            padding: 1px 10px;
            border-radius: 18px;
            border: 1px solid #00fff7;
            box-shadow: 0px 0px 9px #1093b6 inset;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          >div {
            text-align: start;
            margin-top: 10px;
            opacity: 1;
            border-radius: 8px 8px;
            padding: 0 15px 10px;
            box-sizing: border-box;
            line-height: 24px;
            letter-spacing: 1px;

            hr {
              height: 1px;
              border: none;
              border-top: 1px dashed #ffffff80;
            }
          }
        }

        .dig-view-item-name {
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 5px;
          height: 30px;
          line-height: 30px;

          .dig-view-item-name-line2 {
            width: 50px;
            height: 20px;
            margin-right: 5px;
            color: #fff;
            border-radius: 20px;
            // background-color: rgb(204, 184, 184);
            text-align: center;
            line-height: 20px;
          }

          .dig-view-item-name-line3 {
            width: 150px;
            height: 20px;
            margin-left: 10px;
            color: #fff;
            // background-color: rgb(204, 184, 184);
            line-height: 20px;

            ::v-deep.el-input__inner {
              width: 120px;
              height: 30px;
              line-height: 20px;
              display: flex;
              align-items: center;
            }

            ::v-deep.el-input--medium .el-input__icon {
              line-height: 13px;
            }
          }
        }
      }
    }

    .cameracontrol-box {
      width: 100%;
      height: 60%;
    }

    .celuconfigshowview {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;

      .showviewbut {
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        padding: 0;
      }
    }
  }
}

// 无数据 提示
.cameraview-box-two-ds {
  display: flex;
  justify-content: center !important;
  align-items: center;

  h2 {
    font-size: 27px;
    letter-spacing: 4px;
  }
}

::v-deep .el-input__inner {
  border-radius: 5px;
}

// ::v-deep .iframe-btn-container{
//   display: block;
// }
::v-deep .el-input-number.is-controls-right .el-input-number__decrease,
::v-deep .el-input-number.is-controls-right .el-input-number__increase {
  background: transparent;
  border-left-style: 0;
  display: none;
}

::v-deep .el-input-number.is-controls-right .el-input__inner {
  padding-left: 10px;
  padding-right: 10px;
}

#video-container {
  width: 100% !important;
  height: 100% !important;
}

::v-deep {
  #video-container-wrap {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;

    #video-container-headControl {
      display: none !important;
    }

    #video-container {
      max-width: 100% !important;
      max-height: 100% !important;
      width: 100% !important;
      height: 100% !important;

      .video-containerparent-wnd {
        >div {
          max-width: 100% !important;
          max-height: 100% !important;
          width: 100% !important;
          height: 100% !important;
        }
      }

      #video-containercanvas0 {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
      }
    }
  }
}

.celu-but {
  // width: 100px;
  margin-top: 10px;
  padding: 0 15px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  letter-spacing: 2px;
  cursor: pointer;
  background-image: linear-gradient(180deg, #61b9e2 0%, #0991c7 100%);
  border-radius: 29px;
}

.celu-but:hover {
  color: #838c8d;
}

.cameraview-box-main {
  // height: 30%;
  height: 90%;
  width: 100%;

  .dig-view {
    width: 100%;
    height: 99%;
    overflow-y: auto;
    padding: 20px 5px 5px 5px;
    min-height: 100px;
    margin-top: 10px;

    >div {
      width: 100%;
      border-radius: 8px 8px 0px 0px;
      padding: 8px;
      position: relative;

      .title-1 {
        display: inline-block;
        width: 90%;
        left: 5%;
        position: absolute;
        top: -1px;
        border-top: 1px solid;
        border-image: linear-gradient(90deg,
            #005e7700,
            #00fff7,
            #005e7700) 30 1;
      }

      .dig-view-item-title {
        position: absolute;
        top: -24px;
        width: 70%;
        text-align: center;
        left: 15%;
        background-color: #013b4d;
        color: #00fff7;
        font-weight: 500;
        padding: 1px 10px;
        border-radius: 18px;
        border: 1px solid #00fff7;
        box-shadow: 0px 0px 9px #1093b6 inset;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      >div {
        text-align: start;
        margin-top: 10px;
        opacity: 1;
        border-radius: 8px 8px;
        padding: 0 15px 10px;
        box-sizing: border-box;
        line-height: 24px;
        letter-spacing: 1px;

        hr {
          height: 1px;
          border: none;
          border-top: 1px dashed #ffffff80;
        }
      }
    }

    .dig-view-item-name {
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 5px;
      height: 30px;
      line-height: 30px;

      .dig-view-item-name-line2 {
        width: 50px;
        height: 20px;
        margin-right: 5px;
        color: #fff;
        border-radius: 20px;
        // background-color: rgb(204, 184, 184);
        text-align: center;
        line-height: 20px;
      }

      .dig-view-item-name-line3 {
        width: 150px;
        height: 20px;
        margin-left: 10px;
        color: #fff;
        // background-color: rgb(204, 184, 184);
        line-height: 20px;

        ::v-deep.el-input__inner {
          width: 120px;
          height: 30px;
          line-height: 20px;
          display: flex;
          align-items: center;
        }

        ::v-deep.el-input--medium .el-input__icon {
          line-height: 13px;
        }
      }
    }
  }
}

.cameraview-bottom {
  background: #ffffff;
  box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.05);
  border-radius: 6px;
}
::v-deep #loading-icon {
  display: none;
}
</style>
